<template>
	<view>
		<!-- 地图 -->
		<view style="width: 100%;height: 1300rpx;border: 1px solid red;">
			<map name="" style="width: 100%;height: 100%;"></map>


			<!-- 汽车保养店 -->
			<view class="washShopItem" v-model="washShopInfo" style="position: fixed;bottom: 0rpx;">
				<view class="washShopInfo">
					<view class="shoptitle" style="margin-bottom: 10rpx;">
						<text style="font-weight: bold;font-size: 32rpx;">{{washShopInfo.name}}</text>
					</view>
					<view class="shopstar" style="margin-bottom: 10rpx;">
						<!-- 只读状态,默认false：可以手动选择。true:只读 -->
						<uni-rate :readonly="true" :value="washShopInfo.star" />
						<text style="margin-left: 10rpx;">{{washShopInfo.star}}分</text>
						<text style="margin-left: 40rpx;">距离：</text><text
							style="color: blue;">{{washShopInfo.distance}}m</text>
					</view>
					<view class="opentime" style="margin-bottom: 10rpx;">
						<text>营业时间: {{washShopInfo.opentime}}</text>
					</view>
					<view class="shopaddress">
						<text>{{washShopInfo.address}}</text>
					</view>
				</view>
				<!-- 门店图片 -->
				<view>
					<image src="../../../static/carbaoyang.webp"
						style="width: 150rpx; height: 120rpx; position: absolute; right: 60rpx;top: 70rpx; " mode="">
					</image>
				</view>

				<!-- 底部按钮 -->
				<view class="washServiceButtomView">
					<view class="CustomerServiceView">

						<button @click="GetCustomerService">联系门店</button>
					</view>
					<view class="buyWashServiceView">
						<button type="warn">立即预定</button>
					</view>
				</view>

				<!-- 弹出层部分 -->
				<view class="bottomView">
					<view>
						<!-- 普通弹窗 -->
						<uni-popup ref="popup" background-color="#fff" :mask-click="false">
							<view class="popup-content"
								style="text-align: center; margin-top: 30rpx; margin-bottom: 30rpx;">
								<view style="font-size: 40rpx;">13592667163</view>
							</view>
							<view style="display: flex; padding-bottom: 20rpx;">
								<button type="primary" style="width: 200rpx;" size="mini" @click="close()">呼叫</button>
								<button type="primary" style="width: 200rpx;" size="mini" @click="close()">取消</button>
							</view>

						</uni-popup>
					</view>
				</view>

			</view>



		</view>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				washShopInfo: {
					id: 1,
					name: "伟业汽车保养厂（人民路店）",
					distance: 44,
					star: 3,
					sales: 322,
					opentime: "周一至周五 09:00-22:00",
					address: "山阳区人民中路32号"
				},
			}
		},

		methods: {
			// 底部弹出框关闭方法
			close() {
				this.$refs.popup.close()
			},
			GetCustomerService() {
				this.$refs.popup.open('bottom')
			}
		}
	}
</script>

<style>
	page {
		/* background-color: aquamarine; */
	}

	.washShopItem {
		width: 100%;
		background-color: white;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	/* 联系门店按钮 */
	.CustomerServiceView {
		margin-top: 20rpx;
		margin-left: 65rpx;
	}

	.buyWashServiceView {
		margin-top: 20rpx;
		margin-left: 150rpx;
	}

	.washServiceButtomView {
		display: flex;
		/* width: 100%; */
		/* height: 120rpx; */
		/* 		border-radius: 50%;
				background-color: red; */

		/* text-align: center;
		margin: auto; */



	}
</style>